<template>
  <div class="edit-phone">
    <img src="@/assets/images/img_phone.png" alt="">
    <p>为保护您的账号安全，需要对现在绑定的手机号进行短信验证（{{numFormat(phone)}}）</p>
     <div style="padding: 0 15px">
        <van-button type="info" block  class="submit" @click="nextBtn"
          >下一步</van-button
        >
      </div>
  </div>
</template>
<script>
import { sendCode } from '../service/service.js'
export default {
  name: 'EditPhone',
  data () {
    return {
      phone: ''
    }
  },
  created () {
    if (this.$route.query.phone) {
      this.phone = this.$route.query.phone
    }
  },
  watch: {

  },
  methods: {
    nextBtn () {
      sendCode({ phone: this.phone })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.$router.push({ name: 'VerifyPhone', params: { phone: this.phone } })
    },
    numFormat (num) {
      return num && num.slice(0, 3) + '****' + num.slice(7)
    }
  }
}
</script>
<style lang="less" scoped>
.edit-phone{
  background: #fff;
  text-align: center;
  >img{
    margin-top: 60px;
    width: 60px;
    vertical-align: middle;
  }
  p{
    margin-top: 30px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 1.5;
  }
}
.submit {
  margin-top: 120px;
  border-radius: 5px;
}
</style>
